<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>智慧商城</title>
  <link rel="stylesheet" href="./iconfont/font/iconfont.css">
  <link rel="stylesheet" href="./swiper-8.4.7/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/commen.css">
  <link rel="stylesheet" href="./css/index.css">
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 49.0667vw;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <!-- 头部 -->
  <header class="header">
    <div class="header_title">智慧商城</div>
  </header>

  <!-- 搜索 -->
  <div class="search">
    <a href="./search.html">
      <div class="search_content">
        <!-- <span class="iconfont icon-RectangleCopy"></span> -->
        <!-- <input type="search" placeholder="搜索你要找的商品"> -->
      </div>
    </a>
  </div>

  <!-- 轮播图 -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <!-- <div class="swiper-slide"><img src="./uploads/banner_1.jpg" alt=""></div> -->
      <!-- <div class="swiper-slide"><img src="./uploads/banner_2.jpg" alt=""></div> -->
      <!-- <div class="swiper-slide"><img src="./uploads/banner_3.jpg" alt=""></div> -->
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <!-- 自己写的 -->
  <!-- <div class="banner">
    <div class="banner_drop">
      <span class="active"></span>
      <span></span>
      <span></span>
    </div>
    <a href="#">
      <div class="banner_pic">
        
      </div>
    </a>
  </div> -->

  <!-- 提示 -->
  <div class="prompt">
    <span class="iconfont icon-gonggao"></span>
    <div class="prompt_scroll">
      <p>智慧商城2.0全新上线，更多新品等你来选~</p>
    </div>
  </div>

  <!-- 导航栏 -->
  <ul class="nav">
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_1.png" alt="">
        </span>
        <p>新发首品</p>
      </a>
    </li>
    <!-- <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_2.png" alt="">
        </span>
        <p>居家生活</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_3.png" alt="">
        </span>
        <p>服饰鞋包</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_4.png" alt="">
        </span>
        <p>美食酒水</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_5.png" alt="">
        </span>
        <p>个护清洁</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_6.png" alt="">
        </span>
        <p>母婴亲子</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_7.png" alt="">
        </span>
        <p>运动旅行</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_8.png" alt="">
        </span>
        <p>数码家电</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_9.png" alt="">
        </span>
        <p>宠物生活</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span>
          <img src="./uploads/Tab_10.png" alt="">
        </span>
        <p>每日抄底</p>
      </a>
    </li> -->
  </ul>

  <!-- 推荐 -->
  <div class="recommend">
    <a href="#">
      <!-- <img src="./uploads/Pic_1.png" alt=""> -->
    </a>
  </div>

  <!-- 主体 -->
  <div class="main">
    <div  class="like"><p>——— 猜你喜欢 ———</p></div>
    <div class="main_all_content">
      <ul class="main_content">
        <!-- <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/main_1.jpg" alt="">
            </div>
            <div class="info">
              <div class="txt ellipsis-2">三星手机 SAMSUNG Galaxy S23 8GB+2 56GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23</div>
              <div class="count">已售1010件</div>
              <div class="price">
                <span>￥<i>0.01</i></span>
                <span>￥<i>6699.00</i></span>
              </div>
            </div>
          </a>
        </li> -->
      </ul>
    </div>
  </div>

  <!-- 底部 -->
  <ul class="footer">
    <li class="active">
      <a href="javascript:;">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </a>
    </li>
    <li>
      <a href="./class.html">
        <span class="iconfont icon-fenlei"></span>
        <p>分类</p>
      </a>
    </li>
    <li>
      <a href="./car.html">
        <span class="iconfont icon-icon-test"></span>
        <p>购物车</p>
        <!-- 显示购物车数量 -->
        <div class="car_number"></div>
      </a>
    </li>
    <li>
      <a href="./center.html">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </a>
    </li>

  </ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="./swiper-8.4.7/swiper/swiper-bundle.min.js"></script>
  <script src="./js/commen.js"></script>
  <script src="./js/index.js"></script>
  
  
</body>

</html>